<template>
	<view class="wrap area-b">
		<u-navbar  title="实名认证" :border-bottom="false" :title-bold="true"></u-navbar>
		<view class="banner">
			<view class="u-font-46 text-bold">{{isReal?'已实名认证':'未实名认证'}}</view>
			<view class="u-font-32 u-m-t-10">
				提升网络环境，推动行业高质量发展 
			</view>
		</view>
		<view class="from">
			<view class="from-head">
				<text class="u-font-36 text-bold">使用有效身份证信息认证</text>
			</view>
			<view class="from-body">
				<view class="group u-border-bottom">
					<view class="label">
						真实姓名
					</view>
					<input type="text" v-model="realName" placeholder="请填写您的真实姓名" placeholder-class="text-gray" :disabled="isReal">
				</view>
				<view class="group u-border-bottom">
					<view class="label">
						身份证号
					</view>
					<input type="text" v-model="idCard" placeholder="请填写身份证号" placeholder-class="text-gray" :disabled="isReal">
				</view>
				<view class="group u-border-bottom">
					<view class="label">
						手机号
					</view>
					<!-- <text class="phone-tip u-font-24 text-gray">该手机号为余额与支付宝结算的唯一凭证</text> -->
					<input class="phone-input" type="number" v-model="mobile" placeholder="请填写您的手机号" placeholder-class="text-gray" :disabled="disabled">
				</view>
			</view>
			<view class="u-m-t-20 u-text-center text-red" v-if="tip">
				<text>{{tip}}</text>
			</view>
			<view class="from-foot" v-if="!isReal">
				<view class="submit bg-theme" @tap="submit">
					<view class="txt">实名认证 </view>
				</view>
			</view>
		</view>
		<view class="u-text-center u-m-t-20 u-m-x-30 text-blue">
			实名认证服务由阿里云提供，保障您的信息安全
		</view>
		<view class="dialog-mask" :class="{show:ask.show}">
			<view class="box">
				<view class="u-text-center u-font-40 text-grey">
					实名认证
				</view>
				<view class="u-font-28 u-m-t-10">
					<text class="u-font-32 text-grey">我已经阅读并确认，注册的手机号、姓名、身份证号码是本人真实资料，并仔细检查，确认信息无误！</text>
				</view>
				<view class="u-font-28 u-m-t-30">
					<text class="u-font-32 text-grey">如不符上述要求，引发的法律责任自行承担。</text>
				</view>
				<view class="btn-group">
					<view class="btn bg-grey" @tap="reject">
						再检查下
					</view>
					<view class="btn bg-theme" @tap="resolve">
						确认无误
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		delay,
		jumpTo,
		goback
	} from "@/utils/util";
	import {mapGetters,mapActions} from "vuex"
	let bridge = null;
	export default {
		data() {
			return {
				realName:'',
				mobile:'',
				idCard:'',
				disabled:false,
				tip:'',
				ask:{
					show:false
				}
			};
		},
		computed:{
			...mapGetters('user',['userInfo','isReal'])
		},
		async onLoad() {
			if(this.userInfo&&this.userInfo.mobile){
				this.mobile = this.userInfo.mobile
				this.disabled = true
			}
			this.realName = this.userInfo.userExt.realName
			this.idCard = this.userInfo.userExt.idCard
		},
		methods: {
			...mapActions('user', ['fetchUserInfo']),
			jumpTo,
			async submit(){
				try{
					if(this.submit.lock){
						throw new Error('正在请求中')
					}
					if(!this.realName){
						throw new Error('请输入真实姓名')
					}
					if(!this.idCard){
						throw new Error('请输入身份证号')
					}
					if(!this.mobile){
						throw new Error('请输入手机号')
					}
				}catch(e){
					return toast(e.message)
				}
				if(this.isReal){
					return
				}
				await new Promise((resolve,reject)=>{
					this.ask.show = true
					bridge = {
						resolve:(e)=>{
							this.ask.show = false
							resolve(e)
						},
						reject:(e)=>{
							this.ask.show = false
							reject(e)
						}
					}
				})
				try{
					this.submit.lock = true
					uni.showToast({
						icon:'success',
						title:'仅供演示'
					})
				}catch(e){
					toast(e.message)
					this.tip = e.message
					await delay(1000)
				}finally{
					this.submit.lock = false
				}
			},
			resolve(e){
				bridge&&bridge.resolve&&bridge.resolve(e)
			},
			reject(e){
				bridge&&bridge.reject&&bridge.reject(e)
			}
		},
	};
</script>
<style>
	page{
		background-color: #F5F6Fa;
	}
</style>
<style lang="scss" scoped>
	.wrap{
		background-image: linear-gradient(#fdf5e6,transparent);
		background-size: 750rpx 750rpx;
		background-repeat: no-repeat;
	}
	.banner{
		padding: 50rpx 30rpx 80rpx;
		color: #895527;
		background-image: url("");
		background-position: 95% 10rpx;
		background-repeat: no-repeat;
		background-size: 180rpx 180rpx;

	}
	.from{
		background-color: #FFFFFF;
		margin: 0rpx 30rpx;
		border-radius: 20rpx;
		.from-head{
			padding: 40rpx 30rpx 20rpx;
		}
		.from-body{
			
			background-color: rgba($color:#ffffff, $alpha:0.2);
			border-radius: 10rpx;
			.group{
				padding: 30rpx 0;
				margin: 0 30rpx;
				display: flex;
				.label{
					width: 30%;
					flex-shrink: 0;
					color:#666666;
				}
			}
		}
		.from-foot{
			margin-top: 50rpx;
			padding-bottom: 40rpx;
			.submit{
				padding: 20rpx 30rpx;
				font-size: 32rpx;
				text-align: center;
				margin: 0 10%;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.txt{
				position: relative;
			}
			.tip{
				position: absolute;
				top: 0;
				left: 100%;
				font-size: 26rpx;
				color: #e54d42;
				white-space: nowrap;
				transform: translateY(-50%);
			}
		}
	}
	.dialog-mask{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		background-color: rgba($color:#000000, $alpha:0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		opacity: 0;
		pointer-events: none;
		&.show{
			opacity: 1;
			pointer-events: auto;
			.box{
				transform: scale(1);
			}
		}
		.box{
			width: 600rpx;
			background-color: #ffffff;
			color:#333333;
			border-radius: 30rpx;
			padding: 20rpx 20rpx 40rpx;
			transform: scale(0.1);
			transition: all 300ms ease-out;
		}
		.btn-group{
			display: flex;
			justify-content: space-around;
			margin-top: 20rpx;
		}
		.btn{
			display: flex;
			justify-content: center;
			
			padding: 14rpx 40rpx;
			font-size: 32rpx;
			border-radius: 20rpx;
			font-weight: bold;
		}
	}
</style>
